<template>
  <base-view :model="query" @submit="search" class="custom">
    <template v-slot:params>
      <a-col :span="8">
        <a-form-model-item label="原机构">
          <a-input
            placeholder="输入原机构"
            v-model="query.signinstid"
          />
        </a-form-model-item>
      </a-col>
      <a-col :span="24">
        <a-form-model-item class="search">
          <a-button type="primary" html-type="submit">查询</a-button>
          <a-button style="margin-left: 8px" html-type="reset" @click="reset">重置</a-button>
        </a-form-model-item>
      </a-col>
    </template>
    <div class="section">
      <a-table
        ref="table"
        :columns="columns"
        :dataSource="dataSource"
        :rowKey="
          (record, index) => {
            return index;
          }
        "
        @change="pageChange"
        @showSizeChange="pageChange"
        :loading="loading"
        :pagination="pagination"
        :scroll="{ x: 1500 }"
      >
        <template slot="operation" slot-scope="text, record">
          <a-icon type="setting" theme="twoTone" twoToneColor="#4a9ff5" @click="edit(record)" title="撤并" v-has-permission="['mchntLevel:view']"></a-icon>
          <a-badge
            status="warning"
            text="无权限"
            v-has-no-permission="[
              'mchntLevel:view'
            ]"
          ></a-badge>
        </template>
      </a-table>
    </div>
    <a-modal
      v-model="modalVisible"
      :title="modalTitle"
      width="1050px"
      @ok="submit"
      :maskClosable="false"
      :footer="isHideFoot?null:undefined"
    >
      <org-abolish-and-merge-operation ref="modalForm" />
    </a-modal>
  </base-view>
</template>

<script>
  import OrgAbolishAndMergeOperation from "./OrgAbolishAndMergeOperation";

  export default {
    name: "OrgAbolishAndMerge",
    components: { OrgAbolishAndMergeOperation },
    data() {
      return {
        beanInfo: {},
        modalVisible: false,
        isHideFoot: false,
        modalTitle: "",
        operationType: "edit",
        query: { instId: "", signinstid: ""},
        loading: false,
        pagination: {
          pageNum: 1,
          pageSize: 10,
          pageSizeOptions: ["10", "20", "30", "40", "100"],
          defaultCurrent: 1,
          defaultPageSize: 10,
          showQuickJumper: true,
          showSizeChanger: true,
          showTotal: (total, range) =>
            `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`,
        },
        columns: [
          {
            title: "变更数据",
            dataIndex: "paramKey",
            width: 200,
          },
          {
            title: "变更数量",
            dataIndex: "paramValue",
            width: 200,
          },
          {
            title: "操作",
            scopedSlots: { customRender: "operation" },
            fixed: "right",
            width: 120,
          },
        ],
        dataSource: [],
      };
    },

    methods: {
      async submit() {
        const res = await this.$refs.modalForm.submit();
        if (res) {
          this.modalVisible = false;
          this.pagination.defaultCurrent = 1;
          await this.search();
        }
      },

      async reset(){
        this.query = {instId:this.query.instId, signinstid:""}
        this.pagination.pageNum = this.pagination.defaultCurrent;
        this.pagination.pageSize = this.pagination.defaultPageSize;
        await this.search();
      },
      async search(e) {
        e && e.preventDefault && e.preventDefault();
        try {
          const res = await this.$get("/admin/igas/OrgAbolishAndMerge/list", {
            instId: this.query.instId,
            signinstid: this.query.signinstid,
            pageNum: this.pagination.pageNum,
            pageSize: this.pagination.pageSize,
          });
          this.dataSource = res.data;
          this.$set(this.pagination, "total", +res.data.total);
        } catch (e) {
          console.error(e);
        }
      },
      openModal(type = "edit", beanInfo) {
        this.modalTitle = {
          edit: "机构撤并",
        }[type];
        this.modalVisible = true;
        this.$nextTick(() => {
          this.$refs.modalForm.setOperatorType(type);
          if (type === "edit" ) {
            this.$refs.modalForm.setBeanInfo(beanInfo);
          }
          this.$refs.modalForm.resetFields();
        });
      },
      async edit(item) {
        this.openModal("edit", item);
      },
      pageChange(e) {
        this.pagination.pageNum = e.current;
        this.pagination.pageSize = e.pageSize;
        this.search();
      },
    },
  };
</script>
<style lang="less" scoped>
  @import "../../../../../static/less/Common";
</style>
